<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" v-if="$route?.meta?.keepAlive" />
      </keep-alive>
      <component :is="Component" v-if="!$route?.meta?.keepAlive" />
    </router-view>
  </div>
</template>
<script setup>
import { generate, getRgbStr } from '@arco-design/color'
const list = generate('#43cf7c', { list: true, dark: false })
list.forEach((color, index) => {
  const rgbStr = getRgbStr(color)
  document.body.style.setProperty(`--primary-${index + 1}`, rgbStr)
})
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
/* 设置滚动条的宽度和高度 */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: transparent;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2px;
}

/* 鼠标悬停时滚动条滑块 */
::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}
</style>
